import React, { FC, useState } from "react"
import { Layout } from "antd"
import styles from "./index.less"
import LeftBar from "./LeftBar"
import TopTabs from "./TopTabs"
import { LeftOutlined, RightOutlined } from "@ant-design/icons"

const { Content, Sider, Header } = Layout
const medicalInfo: FC = () => {
  const [collapsed, setCollapsed] = useState<boolean>(false)
  return (
    <div className={styles.medicalInfo}>
      <Layout className={styles.leftAside}>
        <Sider collapsible collapsed={collapsed} className={`${styles.leftAsideSider} ${collapsed ? styles.leftAsideSiderMin : ""}`} width='240px'>
          <div className={styles.toggleBtn} onClick={() => { setCollapsed(!collapsed) }}>
            {collapsed ? <RightOutlined className={styles.toggleBt1} /> : <LeftOutlined className={styles.toggleBt1} />}
          </div>
          <LeftBar collapsed={collapsed} />
        </Sider>
        <div className={styles.siteLayout}>
          <div className={styles.siteLayoutHeader} >
            <TopTabs />
          </div>
        </div>
      </Layout>
    </div>
  )
}

export default medicalInfo